<template>
    <div class="info-box">
        <div class="i-nav">
            <span class="c-title-4">
                <!-- 5m 波动分析 -->
                <!-- {{ $t('message.wave.title') }} -->
                {{ $t('message.wave.title') }}
                ({{ kline.curInterval?.description == '1s' ? 'Tick' : kline.curInterval?.description }})
            </span>
            <span class="more" @click="onMore">
                {{ $t('message.Rank.g') }}
                <span class="iconfont icon-gengduo"></span>
            </span>
        </div>
        <div class="i-tabs c-title-5">
            <div class="i-tab">
                <div class="ht1 ht long-txt d-flex">
                    <!-- 代币 -->
                    <div class="label">{{ $t('message.wave.a') }}</div>
                    <Sort :sort="HotSort[0]" :call-fun="sortc.onDown.bind(sortc)"></Sort>
                </div>
                <div class="ht2 ht long-txt d-flex">
                    <!-- 价格 -->
                    <div class="label">{{ $t('message.wave.b') }}</div>
                    <Sort :sort="HotSort[1]" :call-fun="sortc.onDown.bind(sortc)"></Sort>
                </div>
                <div class="ht3 ht long-txt d-flex">
                    <!-- 涨跌 -->
                    <div class="label">{{ $t('message.wave.c') }}</div>
                    <Sort :sort="HotSort[2]" :call-fun="sortc.onDown.bind(sortc)">
                    </Sort>
                </div>
                <div class="ht4 ht long-txt d-flex">
                    <!-- 波动率 -->
                    <div class="label">{{ $t('message.wave.d') }}</div>
                    <Sort :sort="HotSort[3]" :call-fun="sortc.onDown.bind(sortc)">
                    </Sort>
                </div>
                <div class="ht5 ht long-txt d-flex">
                    <!-- 成交额 -->
                    <div class="label">{{ $t('message.wave.e') }}</div>
                    <Sort :sort="HotSort[4]" :call-fun="sortc.onDown.bind(sortc)"></Sort>
                </div>
            </div>
            <div class="i-empty" v-if="filterAry.length == 0">
                <JEmpty></JEmpty>
            </div>
            <div class="tab-box" v-else>
                <div class="box-tab" v-for="(i, idx) in filterAry" :key="idx" @click="onLog(i)">
                    <div class="box-ht  box-gary coin-link long-txt" @click="onCoin(i.s)">{{ getName(i.s) }}</div>
                    <div class="box-ht2 box-ht long-txt box-gary">
                        <JNumber :num="i.p" prefix="$" :is-color="true" price></JNumber>
                    </div>
                    <div class="box-ht3 box-ht long-txt box-gary">
                        <JNumber :num="i.r" suffix="%" origin :is-color="true"></JNumber>
                    </div>
                    <div class="box-ht4 box-ht long-txt box-gary">
                        <JNumber :num="i.V" :is-color="true" origin suffix="%"></JNumber>
                    </div>
                    <div class="box-ht5 box-ht long-txt box-gary">
                        <JNumber :num="i.q"></JNumber>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import JEmpty from "@/components/j-empty/index.vue";
import { URL_WAVE_AMOUNT } from '@/comm/api';
import { get } from '@/comm/request';
import { Sort as Sort_, SortEnum } from '@/comm/sort';
import Sort from "@/components/j-sort/index.vue";
import { sortList } from '@/comm/tooler';
import JNumber from '@/components/j-number/index.vue';
// import Operate from '@/components/monitor/components/operate.vue';
import { useKline } from '@/stores/kline';
import { useRank } from '@/stores/rank';
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useCore } from "@/hooks/useCore";
const router = useRouter();
let limit = 10;
const core = useCore();
const rank = useRank();
const kline = useKline();
const list = ref<any[]>([]);
let tid = 0;

const sort = reactive({
    name: 0,
    price: 0,
    rf: 0,
    wave: 0,
    vol: 0,
});
const sorts = ref([
    {
        key: 0,
        val: SortEnum.NONE
    },
    {
        key: 1,
        val: SortEnum.NONE
    },
    {
        key: 2,
        val: SortEnum.NONE
    },
    {
        key: 3,
        val: SortEnum.NONE
    },
    {
        key: 4,
        val: SortEnum.NONE
    },
]);
const sortc = new Sort_(sorts);
const HotSort = sortc.sort;
sortc.callFun = function (item) {
    // console.log('yzt_点击了volatility', item);
    sort.name = 0;
    sort.price = 0;
    sort.rf = 0;
    sort.wave = 0;
    sort.vol = 0;
    if (item.key == 0) {
        sort.name = item.val;
    }
    if (item.key == 1) {
        sort.price = item.val;
    }
    if (item.key == 2) {
        sort.rf = item.val;
    }
    if (item.key == 3) {
        sort.wave = item.val;
    }
    if (item.key == 4) {
        sort.vol = item.val;
    }
}

const filterAry = computed(() => {

    var ary = [...listArr.value];
    if (sort.name !== 0) {
        sortList(ary, "s", sort.name == 2);
    }
    if (sort.price !== 0) {
        sortList(ary, "p", sort.price == 2);
    }
    if (sort.rf !== 0) {
        sortList(ary, "r", sort.rf == 2);
    }
    if (sort.wave !== 0) {
        sortList(ary, "V", sort.wave == 2);
    }
    if (sort.vol !== 0) {
        sortList(ary, "q", sort.vol == 2);
    }
    // console.log('波动分析数组', ary)
    return ary;
});

onMounted(() => {
    update();
    // tid = window.setInterval(update, 5000);
});

onUnmounted(() => {
    window.clearInterval(tid);
});

const onLog = (item: any) => {
    console.log(item);
}
const onCoin = (str: string) => {
    console.log('当前页面', router.currentRoute.value.path)
    if (router.currentRoute.value.path == '/') {
        core.switchCoinByName(str)
    } else {
        window.open("/coin/" + str);
    }
};

const getName = (str: string) => {
    if (!str) return "";
    if (str.includes(":")) {
        return str.split(":")[1];
    }
    if (str != "USDT") {
        str = str.replace("USDT", "");
    }

    return str;
}

const listArr = computed(() => {
    sortList(rank.WAVE_M5, "V")
    return rank.WAVE_M5.slice(0, 30);
    // return rank.WAVE_M5.slice(0, 10);
})

const onMore = () => {
    let str = "VOLATILITY";
    localStorage.setItem("ranks", str);
    router.push("/ranks/" + str.toLowerCase());
}

const update = () => {
    get(URL_WAVE_AMOUNT, {
        type: "MN5",
        limit: 100
    }).then((res: any) => {
        console.log("tom", res.data);
        var ary = res.data || [];
        // sortList(ary, "V")
        // list.value = res.data.slice(0, limit);
        rank.resetWaveM5(ary);
        // console.log('波动分析数据$$$$$$$$$$$$$$$$$$', list.value)
    })
}

const onJump = (str: string) => {
    kline.saveLastData();
    // router.push({name: "coin", params: {id: coin}})
    window.open("/coin/" + str);
}
</script>

<style lang="less" scoped>
.info-box {
    height: 100%;
    border-bottom: 3px solid #2E3345;

    .i-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #EAECEF;
        height: 25px;
        padding: 5px 12px 0 12px;

        .more {
            font-size: 12px;
            color: var(--color);

            &:hover {
                color: var(--main);
            }

            .icon-gengduo {
                font-size: 12px;
            }
        }

    }

}





.i-tabs {
    height: calc(100% - 25px);
    display: flex;
    flex-direction: column;

    .i-empty {
        height: calc(100% - 30px);

        :deep(.j-none) {
            height: 100%;
        }
    }

    .tab-box {
        height: calc(100% - 30px);
        overflow-y: auto;
        box-sizing: border-box;

        .box-tab {
            display: flex;
            align-items: center;
            border-bottom: #2E3345 solid 1px;
            padding: 5px 12px;

            &:last-child {
                border-bottom: none;
            }

            .box-label {
                margin-right: 2px;
            }

            .box-ht {
                flex: 1 0 0;
                width: 0;
                color: #B1B6C6;
            }

            .box-ht2 {
                flex: 1.2 0 0;
                margin-left: 10px;
            }

            .box-ht4 {
                flex: 0.8 0 0;
                margin-left: 10px;
            }

            .box-ht5 {
                justify-content: flex-end;
                text-align: right;
            }

            .box-gary {
                color: #EAECEF;
            }
        }
    }
}

.i-tab {
    display: flex;
    align-items: center;
    border-bottom: #2E3345 solid 1px;
    padding: 10px 12px;

    .label {
        margin-right: 2px;
    }

    .ht {
        flex: 1 0 0;
        width: 0;
        color: #B1B6C6;

        .s-warp {
            // height: 18px !important;
            // background-color: royalblue;
        }
    }

    .gary {
        color: #EAECEF;
    }

    .ht2 {
        flex: 1.2 0 0;
        margin-left: 10px;
    }

    .ht4 {
        flex: 0.8 0 0;
        margin-left: 10px;
        // background-color: blue;
    }

    .ht5 {
        // background-color: rebeccapurple;
        justify-content: flex-end;
        text-align: right;
    }
}
</style>
